<%@ page contentType="text/html; charset=UTF-8" %>
<%@page import="cn.bopomo.dealer.uloo.common.UlooConstant"%>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-nested.tld" prefix="nested" %>
<html:html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title></title>

		<style type="text/css">
		.spanDiv{
			margin:10px;
		}
		.test{
			/*display:none;*/
			width:360px;
			margin: auto;
			position:absolute;
			background-color: #f2f6fb;
			border:1px solid #56626d;
			
		}
		
		.test table{
			font-size:12px;
		}
		.test table tr{
		border-bottom:1px solid #56626d;
		}
		.selectStyle{
			width:100px;
		}
		.even1{
			background-color:#eeeeee;
		}
		.even2{
			background-color:#DDDDDD;
		}
		.td-font{
			color:#03c;font-weight:bold;
		}
		</style>
		<script language="javascript" src="/js/yahoo.js"></script>
		<script language="javascript" src="/js/yahoo_event.js"></script>
		<script language="javascript" src="/js/yahoo_dom.js"></script>
		<script language="javascript" src="/js/yahoo_calendar.js"></script>
		<link type="text/css" rel="stylesheet" href="/assets/calendar.css">
		<link rel="stylesheet" type="text/css" href="/assets/dpSyntaxHighlighter.css" />
		<script language="javascript" type="text/javascript">
		
		
			function checkByDate(){
				var form = document.forms['searchForm'];
				form.submit();
			}
			
			//yahoo date widget code begin
			var cal1;
			var call2;
			function init() {
				cal1 = new YAHOO.widget.Calendar2up("cal1","containerDate1");
				cal1.setChildFunction("onSelect",setDate1);
				cal1.render();
				
				cal2 = new YAHOO.widget.Calendar2up("cal2","containerDate2");
				cal2.setChildFunction("onSelect",setDate2);
				cal2.render();
			}
			
			function setDate1() {
						var date1 = cal1.getSelectedDates()[0];
						var date = date1.getYear() + "-" + (date1.getMonth()+1) + "-" + date1.getDate();
						searchForm.startDate.value= date;		
						cal1.hide();
			}
			
			function setDate2() {
						var date2 = cal2.getSelectedDates()[0];
						var date = date2.getYear() + "-" + (date2.getMonth()+1) + "-" + date2.getDate();
						searchForm.endDate.value= date;		
						cal2.hide();
			}
			
			function show1(){
				var link1 = document.getElementById('dateLink1');
				var pos = YAHOO.util.Dom.getXY(link1);
				cal1.outerContainer.style.display='block';
				YAHOO.util.Dom.setXY(cal1.outerContainer, [pos[0],pos[1]+link1.offsetHeight+1]);
			}
			
			function show2(){
				var link2 = document.getElementById('dateLink2');
				var pos = YAHOO.util.Dom.getXY(link2);
				cal2.outerContainer.style.display='block';
				YAHOO.util.Dom.setXY(cal2.outerContainer, [pos[0],pos[1]+link2.offsetHeight+1]);
			}
			YAHOO.util.Event.addListener(window, "load", init);
		</script>
	</head>
	<body>
	<div>
		<%	String pageList=UlooConstant.KEY_VPN_CONSUME_LIST_PAGE; 	%>
		<TABLE width="95%" align="center" cellpadding="2" cellspacing="1" bgcolor="#FFFFFF" style="border:1px solid #56626d;font-size:12px">

		  <TR bgcolor="#FFFFFF">
		    <TD colspan="2" align="left" style="font-size:14px">
		    	<B>&nbsp;&nbsp;ULoo_VPN消费 列表</B>
		    </TD>
		    <TD colspan="20" align="right" style="font-size:14px">
	            	<html:form action="/uloo/showVpnConsumeList.do" method="get">
	       	  	    	<input type="hidden" name="photo" value="true"/>
	       	  	    	<label for="startDate">起始时间：</label>
	       	  	    	<html:text property="startDate" size="10"></html:text>
	       	  	    	&nbsp;&nbsp;
	       	  	    	<a href="javascript:void(0);" onclick="show1();">
	       	  	    		<img id="dateLink1" src="/images/pdate.gif" border="0" />
	       	  	    	</a>
	                    <label for="endDate">结束时间：</label>
	       	  	    	<html:text property="endDate" size="10"/>
	                    &nbsp;&nbsp;
	                    <a href="javascript:void(0);" onclick="show2();">
	                    	<img id="dateLink2" src="/images/pdate.gif" border="0" />
	                    </a>
	                    <input type="button" onClick="checkByDate();" value="查找"/> 
	                </html:form>
		    </TD>

		  </TR>
		  <TR bgcolor="#FFFFFF">
		    <TH width="8%" style="background:#46525d;text-align: center;">
		    	<span style="background:#46525d;color:#FFFFFF;text-align: center;">
		    		编号
				</span>
			</TH>

		    <TH width="15%" style="background:#46525d;text-align: center;">
		    	<span style="background:#46525d;color:#FFFFFF;text-align: center;">
		    		vpn帐号
		    		</span></TH>
		    <TH width="20%" style="background:#46525d;text-align: center;">
		    	<span style="background:#46525d;color:#FFFFFF;text-align: center;">
		    	产品名称
				</span>
				</TH>
		    <TH width="10%" style="background:#46525d;text-align: center;">
		    	<span style="color:#FFFFFF">
		    		服务开通
		    	</span>
		    </TH>
		    <TH width="10%" style="background:#46525d;text-align: center;">
		    	<span style="color:#FFFFFF">
		    		服务终止
		    	</span>
		    </TH>
		    <TH width="10%" style="background:#46525d;text-align: center;">
		    	<span style="background:#46525d;color:#FFFFFF;text-align: center;">
		    	消费类型
				</span></TH>
		    <TH width="10%" style="background:#46525d;text-align: center;">
		    	<span style="color:#FFFFFF">
		    		消费金额
				</span>
			</TH>
		    <TH width="10%" style="background:#46525d;text-align: center;">
		    	<span style="color:#FFFFFF">
		    		消费日期
		    	</span>
		    </TH>
		    <TH width="10%" style="background:#46525d;text-align: center;">
		    	<span style="color:#FFFFFF">
		    		操作
		    	</span>
		    </TH>
		  </TR>

			<logic:notPresent name="<%=pageList%>">
			  	<TR bgcolor="#EEEEEE">
			    	<TD nowrap align="center" colspan="20" >没有找到相关的信息</TD>
				</TR>
			</logic:notPresent>
			<logic:present name="<%=pageList%>">
				<logic:iterate id="dl" indexId="ind" name="<%=pageList%>" property="list">
					<% if(ind.intValue()%2==0){%> 
						<TR bgcolor="#EEEEEE">
					<% } else { %>
       					<TR bgcolor="#DDDDDD">
					<% } %>
						    <TD nowrap align="center">
								<bean:write name="dl" property="id" />
							</TD>

						    <TD nowrap align="center">
						    	<div style="color:#03c;font-weight:bold;">
									<bean:write name="dl" property="vpnName" />
								</div>
							</TD>
						    <TD nowrap align="center">
								<bean:write name="dl" property="productName" />
							</TD>
						    <TD nowrap align="center">
								<bean:write name="dl" property="serviceBegin.time" format="yy-MM-dd hh:mm"/>
						    </TD>
						    <TD nowrap align="center">
								<bean:write name="dl" property="serviceEnd.time" format="yy-MM-dd hh:mm"/>
						    </TD>
						    <TD nowrap align="center">
								<bean:write name="dl" property="typeName" />
							</TD>
						    <TD nowrap align="right">
						    	<span style="color:#03c;font-weight:bold;">
									<bean:write name="dl" property="consumeAmount" />&nbsp;&nbsp;
								</span>
							</TD>

						    <TD nowrap align="center">
								<bean:write name="dl" property="createTime.time" format="yyyy-MM-dd_hh:mm"/>
						    </TD>					    
						    <TD nowrap align="center">
						    	[<a href='/uloo/showVpnConsumeDetail.do?id=<bean:write name="dl" property="id" />' target="_blank">查看</a>]
						    		<!-- 
					    		<button onClick="location='/uloo/showVpnConsumeDetail.do?id=<bean:write name="dl" property="id" />'">
									查看
								</button>
						    		 -->
						    </TD>
				  </TR>
				</logic:iterate>	
				<TR bgcolor="#EEEEEE">
			    	<TD nowrap align="center" colspan="20" >
						<bean:write name="<%=pageList%>" property="pageStr" filter="false"/>
			    	
			    	</TD>
				</TR>
				
				
						
						
			</logic:present>
		</TABLE>
    <div id="containerDate1" style="position:absolute;display:none"></div>
	<div id="containerDate2" style="position:absolute;display:none"></div>
	</body>
</html:html>
